<!--
 * @Author: byron
 * @Date: 2021-11-16 08:47:29
 * @LastEditTime: 2022-05-09 14:41:15
-->
<template>
    <div class="project">
        <div class="card-cantainer">
            <el-card
                class="box-card"
                v-for="(item, index) in data"
                :key="index"
            >
                <div slot="header" class="clearfix">
                    <span>{{ item.title }}</span>
                    <el-link
                        :underline="false"
                        target="_blank"
                        type="primary"
                        :href="item.href"
                        style="float: right; padding: 3px 0"
                        >源码</el-link
                    >
                </div>
                <div class="card-content">
                    <a :href="item.address" target="_blank">
                        <div class="img-warp">
                            <img v-lazy="item.src" />
                        </div>
                    </a>

                    <div class="desc">
                        <span>{{ item.desc }}</span>
                    </div>
                </div>
            </el-card>
        </div>
    </div>
</template>
<script>
const data = [
    {
        title: '个人博客系统（本系统）',
        href: 'https://gitee.com/echoc/',
        src: 'https://image.huos77.cn/img/blog.png',

        address: 'https://huos77.cn',
        desc: '本系统还在开发过程当中，欢迎大家提出宝贵意见！',
    },
    {
        title: '博客后台管理系统',
        href: 'https://gitee.com/echoc/springboot-admin',
        src: 'https://image.huos77.cn/img/blog-admin.png',
        address: 'https://admin.huos77.cn',
        desc: '本项目为博客后台管理系统，方便对博客相关内容进行管理维护（多处细节没有处理到位，先挖坑，后面有时间再来优化）',
    },

    {
        title: '音乐播放器',
        href: 'https://gitee.com/echoc/',
        src: 'http://image.huos77.cn/img/player-new.png',
        address: 'https://player.huos77.cn/ ',
        desc: '仿网易云播放器网页版，基本功能都有，采用网易云api',
    },

    {
        title: '电商数据可视化',
        href: 'https://gitee.com/echoc/springboot-admin',
        src: 'https://image.huos77.cn/img/visual.jpg',
        address: 'https://visual.huos77.cn/ ',
        desc: '本项目采用echart对后台接收到的数据进行可视化处理',
    },

    {
        title: '电商后台管理平台',
        href: 'https://gitee.com/echoc/springboot-admin',
        src: 'https://gitee.com/echoc/admin-vue/raw/master/images/Snipaste_2021-08-18_00-02-13.png',

        desc: '本项目为练手项目，熟悉vue2.0相关语法的同时，了解前后端如何进行对接，熟悉前端对数据进行相关处理',
    },
    {
        title: '个人简历',
        href: '#',
        src: 'https://image.huos77.cn/img/resume.png',
        address: 'https://resume.huos77.cn',
        desc: '个人介绍中心',
    },
]

export default {
    data() {
        return {
            data: data,
        }
    },
    mounted() {
        setTimeout(() => {
            this.$emit('updateHandle')
        }, 1)
    },
}
</script>

<style lang="less" scoped>
.card-cantainer {
    display: flex;
    flex-wrap: wrap;
    margin-left: -10px;

    .box-card {
        width: calc(50% - 20px);
        padding: 4px;
        margin: 10px;
        animation: project-card-fade 1s ease-in-out 1;

        .img-warp {
            max-height: 260px;
            min-height: 120px;
            overflow: hidden;
            border-radius: 4px;
            overflow: hidden;
            transition: all 0.2s linear;
            animation: project-img-fade 0.8s ease-in 1;

            img {
                width: 100%;
                height: 100%;
            }

            &:hover {
                transform: translate3d(0, -2px, 0);
                box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
                cursor: pointer;
            }
        }

        .desc {
            text-align: center;
            opacity: 0;
            margin-top: 10px;
            margin-top: 10px;
            color: #8a95aa;
            line-height: 1.6em;
            animation: project-img-fade 0.6s ease-in 0.6s 1 forwards;
        }
    }
}

@keyframes project-card-fade {
    from {
        opacity: 0.5;
    }
    to {
        opacity: 1;
    }
}
@keyframes project-img-fade {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
    }
}

@media screen and (max-width: 980px) {
    .card-cantainer {
        .box-card {
            width: calc(100% - 20px);
        }
    }
}
</style>
